<script setup>
import { ref } from 'vue'
import oneGift from './oneGift.vue'
import towGift from './towGift.vue'
import threeGift from './threeGift.vue'
import rotationImg from './components/rotationImg.vue'
const openGift = ref(false)
const giftId = ref(null)
const handleGift = (id) => {
  openGift.value = true
  setTimeout(() => {
    giftId.value = id
    console.log('giftId', giftId.value)
  }, 2400)
}

</script>

<template>
  <div class="container">
    <div>
      <img src="../images/bgc.jpg" class="fullscreen-img" alt="" srcset="">
    </div>
    
    <!-- 礼物选择区域 -->
    <div class="box" v-if="giftId == null">
      <div class="main" v-if="!openGift">
        <img src="../images/gift.gif" @click="handleGift('1')" class="gift-img" alt="" srcset="">
        <img src="../images/gift.gif" @click="handleGift('2')" class="gift-img" alt="" srcset="">
        <img src="../images/gift.gif" @click="handleGift('3')" class="gift-img" alt="" srcset="">
      </div>
      <div class="main" v-else style="margin-top: -180px;margin-left: -30px;">
        <img src="../images/open-gift.gif" width="300px" height="300px" alt="" srcset="">
      </div>
    </div>
    
    <!-- 礼物内容显示区域 -->
    <div class="gift-content" v-if="giftId == 1">
      <oneGift :type="1"></oneGift>
    </div>
    <div class="gift-content" v-if="giftId == 2">
      <towGift></towGift>
    </div>
    <div class="gift-content" v-if="giftId == 3">
      <threeGift></threeGift>
    </div>
  </div>
</template>

<style scoped>
.fullscreen-img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.container {
  min-height: 100vh;
  position: relative;
}

.box { 
  width: 140px;
  height: 80px;
  position: absolute;
  top: calc(50% - 40px);
  left: calc(35% - 70px);
  z-index: 10;
}

.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: -50px;
}

.gift-img{
  width: 120px; 
  height: 120px;
}

/* 添加礼物内容样式 */
.gift-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-size: 24px;
  color: white;
  text-shadow: 1px 1px 2px black;
  padding: 20px;
  border-radius: 10px;
}
</style>